<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟仓管理系统 - 帮助文档</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 56px;
            scroll-behavior: smooth;
        }
        .sidebar {
            position: fixed;
            top: 56px;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 20px 0;
            overflow-x: hidden;
            overflow-y: auto;
            border-right: 1px solid #eee;
        }
        .nav-link {
            color: #333;
        }
        .nav-link.active {
            background-color: #0d6efd;
            color: white;
        }
        .main-content {
            padding: 30px;
        }
        .section-title {
            margin-top: 2rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #0d6efd;
        }
        .subsection-title {
            margin-top: 1.5rem;
            margin-bottom: 0.8rem;
            color: #2c3e50;
        }
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            display: none;
        }
        .table-responsive {
            margin: 1rem 0;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">虚拟仓管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                     
                    <li class="nav-item">
                        <a class="nav-link" href="#overview">系统概述</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#quickstart">快速入门</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#modules">功能模块</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#workflows">操作流程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#faq">常见问题</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏目录 -->
            <div class="col-md-3 col-lg-2 d-md-block sidebar collapse">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="#overview">1. 系统概述</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#intro">1.1 系统简介</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#features">1.2 核心功能</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#environment">1.3 技术环境</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#account">1.4 测试账号</a>
                    </li>

                    <li class="nav-item mt-2">
                        <a class="nav-link" href="#quickstart">2. 快速入门</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#login">2.1 系统登录</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#navbar">2.2 导航栏说明</a>
                    </li>

                    <li class="nav-item mt-2">
                        <a class="nav-link" href="#modules">3. 功能模块操作</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#inventory">3.1 自有库存管理</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#supplier">3.2 供应商管理</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#zero-stock">3.3 0库存管理</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#docs">3.4 出入库单据管理</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#transfer">3.5 库存转移管理</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#sync">3.6 同步记录管理</a>
                    </li>
                    <li class="nav-item ms-3">
                        <a class="nav-link" href="#orders">3.7 零库存订单管理</a>
                    </li>

                    <li class="nav-item mt-2">
                        <a class="nav-link" href="#workflows">4. 常见操作流程</a>
                    </li>

                    <li class="nav-item mt-2">
                        <a class="nav-link" href="#faq">5. 常见问题与解决方案</a>
                    </li>

                    <li class="nav-item mt-2">
                        <a class="nav-link" href="#notes">6. 注意事项</a>
                    </li>
                </ul>
            </div>

            <!-- 主内容区 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
                <!-- 系统概述 -->
                <section id="overview">
                    <h1 class="section-title">一、系统概述</h1>
                    
                    <div id="intro">
                        <h3 class="subsection-title">1.1 系统简介</h3>
                        <p class="lead">虚拟仓管理系统是一款专注于<strong>库存全生命周期管理</strong>的轻量化系统，核心支持自有库存管理、供应商虚拟库存管理、零库存订单处理、出入库单据追溯等功能，适用于电商、仓储、供应链等场景，帮助用户实现库存可视化、操作可追溯、流程规范化。</p>
                    </div>

                    <div id="features">
                        <h3 class="subsection-title">1.2 核心功能</h3>
                        <ul class="list-group list-group-flush mb-4">
                            <li class="list-group-item">自有库存管理：入库、出库、库存查询与筛选</li>
                            <li class="list-group-item">供应商管理：供应商添加、编辑、删除及状态管理</li>
                            <li class="list-group-item">0库存管理：虚拟库存同步、库存预警、零库存订单创建</li>
                            <li class="list-group-item">出入库单据：单据生成、详情查询、历史记录筛选</li>
                            <li class="list-group-item">库存转移：虚拟库存转自有库存及转移记录追溯</li>
                            <li class="list-group-item">操作记录：虚拟库存同步日志、零库存订单状态跟踪</li>
                        </ul>
                    </div>

                    <div id="environment">
                        <h3 class="subsection-title">1.3 技术环境</h3>
                        <div class="card">
                            <div class="card-body">
                                <ul class="mb-0">
                                    <li>运行环境：Python 3.8+</li>
                                    <li>依赖框架：Flask 2.3.3、SQLite（内置数据库）</li>
                                    <li>浏览器支持：Chrome、Firefox、Edge（最新版本）</li>
                                    <li>访问地址：<code>http://localhost:5000</code>（本地部署）</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div id="account">
                        <h3 class="subsection-title">1.4 测试账号</h3>
                        <div class="alert alert-info">
                            <p><strong>用户名：</strong>admin</p>
                            <p><strong>密码：</strong>123456</p>
                        </div>
                    </div>
                </section>

                <!-- 快速入门 -->
                <section id="quickstart">
                    <h1 class="section-title">二、快速入门</h1>
                    
                    <div id="login">
                        <h3 class="subsection-title">2.1 系统登录</h3>
                        <ol class="list-group list-group-numbered mb-4">
                            <li class="list-group-item">打开浏览器，输入地址 <code>http://localhost:5000</code>，自动跳转至登录页；</li>
                            <li class="list-group-item">输入测试账号（admin/123456），点击「登录」按钮，进入系统主页（自有库存页面）；</li>
                            <li class="list-group-item">登录失败提示「账号密码错误」时，检查用户名和密码是否正确（默认账号不可删除）。</li>
                        </ol>
                    </div>

                    <div id="navbar">
                        <h3 class="subsection-title">2.2 导航栏说明</h3>
                        <p>登录后顶部导航栏包含所有功能入口，点击对应按钮可切换页面：</p>
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>导航项</th>
                                        <th>功能说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>自有库存</td>
                                        <td>管理企业自有库存（入库、出库、查询）</td>
                                    </tr>
                                    <tr>
                                        <td>0库存管理</td>
                                        <td>处理供应商虚拟库存（同步、订单创建）</td>
                                    </tr>
                                    <tr>
                                        <td>供应商管理</td>
                                        <td>维护供应商信息（添加、编辑、删除）</td>
                                    </tr>
                                    <tr>
                                        <td>出入库单据</td>
                                        <td>查看所有入库/出库单据及详情</td>
                                    </tr>
                                    <tr>
                                        <td>转移记录</td>
                                        <td>查询虚拟库存转自有库存的历史记录</td>
                                    </tr>
                                    <tr>
                                        <td>同步记录</td>
                                        <td>追溯虚拟库存同步的操作日志</td>
                                    </tr>
                                    <tr>
                                        <td>零库存订单</td>
                                        <td>管理零库存订单（状态更新、筛选查询）</td>
                                    </tr>
                                    <tr>
                                        <td>退出</td>
                                        <td>返回登录页（清除当前登录状态）</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>

                <!-- 功能模块操作 -->
                <section id="modules">
                    <h1 class="section-title">三、功能模块详细操作</h1>
                    
                    <div id="inventory">
                        <h3 class="subsection-title">3.1 自有库存管理</h3>
                        <p><strong>功能介绍：</strong>支持自有库存的入库新增、出库扣减、多条件筛选查询，实时展示库存数量、仓库位置及更新时间。</p>
                        
                        <h4>3.1.1 库存查询与筛选</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">点击导航栏「自有库存」进入页面；</li>
                            <li class="list-group-item">筛选条件：
                                <ul class="mt-2">
                                    <li>商品名称搜索：输入商品名称关键词，点击「搜索」；</li>
                                    <li>仓库筛选：下拉选择「华东仓」「华南仓」或「所有仓」；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">表格展示字段：商品ID、名称、数量、仓库、类型（默认「自有库存」）、更新时间。</li>
                        </ol>

                        <h4>3.1.2 商品入库</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">点击页面右上角「入库」按钮，打开入库弹窗；</li>
                            <li class="list-group-item">填写表单（带「*」为必填项）：
                                <ul class="mt-2">
                                    <li>商品ID：输入唯一标识（如 PROD-003）；</li>
                                    <li>商品名称：输入商品全称（如 冰箱）；</li>
                                    <li>数量：输入正整数（最小1）；</li>
                                    <li>仓库：下拉选择入库仓库（华东仓/华南仓）；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「确认入库」，提示「入库成功」并显示单据编号，自动刷新库存列表；</li>
                            <li class="list-group-item">入库成功后可在「出入库单据」页面查看详情。</li>
                        </ol>

                        <h4>3.1.3 商品出库</h4>
                        <ol class="list-group list-group-numbered mb-4">
                            <li class="list-group-item">点击页面右上角「出库」按钮，打开出库弹窗；</li>
                            <li class="list-group-item">填写表单：
                                <ul class="mt-2">
                                    <li>商品ID：输入已存在的商品ID；</li>
                                    <li>数量：输入需出库的正整数（不可超过当前库存）；</li>
                                    <li>仓库：选择商品所在仓库；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「确认出库」，提示「出库成功」并显示单据编号；</li>
                            <li class="list-group-item">若提示「库存不足」，需减少出库数量或先执行入库操作。</li>
                        </ol>
                    </div>

                    <div id="supplier">
                        <h3 class="subsection-title">3.2 供应商管理</h3>
                        <p><strong>功能介绍：</strong>维护供应商基础信息，支持添加、编辑、删除操作，同时管理供应商连接状态（已连接/已断开），删除供应商时会<strong>级联删除关联的虚拟库存</strong>（避免数据残留）。</p>
                        
                        <h4>3.2.1 查看供应商列表</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">点击导航栏「供应商管理」进入页面；</li>
                            <li class="list-group-item">表格展示字段：供应商ID、名称、联系人、电话、状态（已连接/已断开）、操作按钮。</li>
                        </ol>

                        <h4>3.2.2 添加供应商</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">点击页面右上角「添加供应商」按钮，打开添加弹窗；</li>
                            <li class="list-group-item">填写表单（带「*」为必填项）：
                                <ul class="mt-2">
                                    <li>供应商名称：输入唯一名称（不可重复）；</li>
                                    <li>联系人：输入对接人姓名；</li>
                                    <li>电话：输入联系电话；</li>
                                    <li>状态：默认「已连接」，可选择「已断开」；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「确认添加」，提示「供应商添加成功」，列表自动刷新；</li>
                            <li class="list-group-item">若提示「供应商名称已存在」，需修改名称后重新提交。</li>
                        </ol>

                        <h4>3.2.3 编辑供应商</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">找到目标供应商，点击操作列「编辑」按钮，打开编辑弹窗；</li>
                            <li class="list-group-item">修改表单信息（名称可修改，需避免与其他供应商重复）；</li>
                            <li class="list-group-item">点击「确认更新」，提示「供应商更新成功」，列表实时更新。</li>
                        </ol>

                        <h4>3.2.4 删除供应商</h4>
                        <ol class="list-group list-group-numbered mb-4">
                            <li class="list-group-item">找到目标供应商，点击操作列「删除」按钮；</li>
                            <li class="list-group-item">弹出确认提示「确定要删除该供应商吗？关联的虚拟库存也会被删除！」，点击「确定」；</li>
                            <li class="list-group-item">提示「供应商删除成功」，列表自动移除该供应商及关联数据。</li>
                        </ol>
                    </div>

                    <div id="zero-stock">
                        <h3 class="subsection-title">3.3 0库存管理（核心功能）</h3>
                        <p><strong>功能介绍：</strong>管理供应商虚拟库存，支持库存同步、库存预警、零库存订单创建，解决「无自有库存但需接单发货」的场景。</p>
                        
                        <h4>3.3.1 虚拟库存查询</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">点击导航栏「0库存管理」进入页面；</li>
                            <li class="list-group-item">筛选条件：
                                <ul class="mt-2">
                                    <li>供应商筛选：下拉选择特定供应商或「所有供应商」；</li>
                                    <li>商品名称搜索：输入商品名称关键词，点击「搜索」；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">表格展示字段：供应商名称、商品ID、名称、虚拟库存数量、补货阈值、状态（正常/预警）、更新时间；
                                <ul class="mt-2">
                                    <li>状态说明：虚拟库存 &lt; 补货阈值 → 「预警」（红色徽章）；反之 → 「正常」（绿色徽章）。</li>
                                </ul>
                            </li>
                        </ol>

                        <h4>3.3.2 同步虚拟库存</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">点击页面右上角「同步虚拟库存」按钮，打开同步弹窗；</li>
                            <li class="list-group-item">填写表单：
                                <ul class="mt-2">
                                    <li>供应商：下拉选择目标供应商；</li>
                                    <li>商品ID：输入商品唯一标识；</li>
                                    <li>商品名称：输入商品全称；</li>
                                    <li>虚拟库存数量：输入非负整数（可大于当前库存，支持库存上调/下调）；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「确认同步」，提示「虚拟库存同步成功」，并显示同步前后数量变化；</li>
                            <li class="list-group-item">同步记录可在「同步记录」页面查看。</li>
                        </ol>

                        <h4>3.3.3 创建零库存订单</h4>
                        <ol class="list-group list-group-numbered mb-4">
                            <li class="list-group-item">点击页面右上角「创建零库存订单」按钮，打开订单弹窗；</li>
                            <li class="list-group-item">填写表单：
                                <ul class="mt-2">
                                    <li>供应商：下拉选择目标供应商；</li>
                                    <li>商品ID：输入已同步虚拟库存的商品ID；</li>
                                    <li>订单数量：输入正整数（不可超过该商品虚拟库存数量）；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「创建订单」，提示「零库存订单创建成功」并显示订单号；</li>
                            <li class="list-group-item">订单创建后，虚拟库存自动扣减，可在「零库存订单」页面跟踪状态。</li>
                        </ol>
                    </div>

                    <div id="docs">
                        <h3 class="subsection-title">3.4 出入库单据管理</h3>
                        <p><strong>功能介绍：</strong>记录所有入库/出库操作的单据，支持单据筛选、详情查看，实现操作可追溯。</p>
                        
                        <h4>3.4.1 单据筛选查询</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">点击导航栏「出入库单据」进入页面；</li>
                            <li class="list-group-item">筛选条件：
                                <ul class="mt-2">
                                    <li>单据类型：下拉选择「入库单」「出库单」或「所有类型」；</li>
                                    <li>仓库筛选：下拉选择「华东仓」「华南仓」或「所有仓库」；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「查询」，表格展示匹配的单据列表，字段包括：单据编号、类型、仓库、操作人、创建时间、状态（默认「已完成」）。</li>
                        </ol>

                        <h4>3.4.2 查看单据详情</h4>
                        <ol class="list-group list-group-numbered mb-4">
                            <li class="list-group-item">找到目标单据，点击操作列「查看详情」按钮，进入单据详情页；</li>
                            <li class="list-group-item">详情页展示：
                                <ul class="mt-2">
                                    <li>单据基本信息：单据编号、类型、仓库、操作人、创建时间、状态；</li>
                                    <li>商品明细：商品ID、商品名称、数量；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「返回列表」可回到单据列表页。</li>
                        </ol>
                    </div>

                    <div id="transfer">
                        <h3 class="subsection-title">3.5 库存转移管理</h3>
                        <p><strong>功能介绍：</strong>支持「供应商虚拟库存 → 自有库存」的转移操作，同时记录转移历史，确保库存流转可追溯。</p>
                        
                        <h4>3.5.1 发起库存转移</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">点击导航栏「转移记录」进入页面；</li>
                            <li class="list-group-item">点击「发起转移」按钮，打开转移弹窗；</li>
                            <li class="list-group-item">填写表单：
                                <ul class="mt-2">
                                    <li>供应商：下拉选择目标供应商；</li>
                                    <li>商品ID：输入已同步虚拟库存的商品ID；</li>
                                    <li>转移数量：输入正整数（不可超过虚拟库存数量）；</li>
                                    <li>转入仓库：下拉选择「华东仓」或「华南仓」；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「确认转移」，提示「虚拟库存转移成功」并显示转移单号和对应的入库单据号；</li>
                            <li class="list-group-item">转移成功后，虚拟库存自动扣减，自有库存同步增加，可在「自有库存」和「出入库单据」页面验证。</li>
                        </ol>

                        <h4>3.5.2 转移记录查询</h4>
                        <ol class="list-group list-group-numbered mb-4">
                            <li class="list-group-item">筛选条件：
                                <ul class="mt-2">
                                    <li>供应商筛选：下拉选择特定供应商或「所有供应商」；</li>
                                    <li>商品ID搜索：输入商品ID关键词；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「查询」，表格展示转移记录，字段包括：转移单号、供应商、商品ID、名称、数量、时间、状态（默认「已完成」）。</li>
                        </ol>
                    </div>

                    <div id="sync">
                        <h3 class="subsection-title">3.6 同步记录管理</h3>
                        <p><strong>功能介绍：</strong>追溯所有虚拟库存同步的操作日志，包括同步时间、供应商、商品、同步前后数量等，支持多条件筛选。</p>
                        
                        <ol class="list-group list-group-numbered mb-4">
                            <li class="list-group-item">点击导航栏「同步记录」进入页面；</li>
                            <li class="list-group-item">筛选条件：
                                <ul class="mt-2">
                                    <li>供应商筛选：下拉选择特定供应商或「所有供应商」；</li>
                                    <li>商品ID搜索：输入商品ID关键词；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「查询」，表格展示同步记录，字段包括：同步时间、供应商、商品ID、名称、同步前数量、同步后数量、操作人。</li>
                        </ol>
                    </div>

                    <div id="orders">
                        <h3 class="subsection-title">3.7 零库存订单管理</h3>
                        <p><strong>功能介绍：</strong>管理所有零库存订单的全生命周期，支持订单筛选、状态更新（已创建→已发货→已完成/已取消）。</p>
                        
                        <h4>3.7.1 订单筛选查询</h4>
                        <ol class="list-group list-group-numbered mb-3">
                            <li class="list-group-item">点击导航栏「零库存订单」进入页面；</li>
                            <li class="list-group-item">筛选条件：
                                <ul class="mt-2">
                                    <li>供应商筛选：下拉选择特定供应商或「所有供应商」；</li>
                                    <li>状态筛选：下拉选择「已创建」「已发货」「已完成」「已取消」或「所有状态」；</li>
                                </ul>
                            </li>
                            <li class="list-group-item">点击「查询」，表格展示订单列表，字段包括：订单号、供应商、商品ID、名称、数量、创建时间、状态、操作按钮。</li>
                        </ol>

                        <h4>3.7.2 更新订单状态</h4>
                        <ol class="list-group list-group-numbered mb-4">
                            <li class="list-group-item">找到目标订单，点击操作列「更新状态」按钮，打开状态弹窗；</li>
                            <li class="list-group-item">下拉选择目标状态（支持切换任意状态）；</li>
                            <li class="list-group-item">点击「确认更新」，提示「订单状态更新成功」，列表实时刷新；
                                <ul class="mt-2">
                                    <li>状态说明：
                                        <li>已创建：订单已生成，待供应商发货；</li>
                                        <li>已发货：供应商已发货，待入库；</li>
                                        <li>已完成：商品已转入自有库存，订单闭环；</li>
                                        <li>已取消：订单作废，虚拟库存自动恢复（需手动同步修正）。</li>
                                    </li>
                                </ul>
                            </li>
                        </ol>
                    </div>
                </section>

                <!-- 常见操作流程 -->
                <section id="workflows">
                    <h1 class="section-title">四、常见操作流程</h1>
                    
                    <div class="card mb-4">
                        <div class="card-header bg-primary text-white">
                            <h3>流程1：新增供应商→同步虚拟库存→创建零库存订单</h3>
                        </div>
                        <div class="card-body">
                            <ol class="list-group list-group-numbered">
                                <li class="list-group-item">进入「供应商管理」→ 添加供应商（填写名称、联系人、电话）；</li>
                                <li class="list-group-item">进入「0库存管理」→ 同步虚拟库存（选择新增供应商，填写商品信息和库存数量）；</li>
                                <li class="list-group-item">进入「0库存管理」→ 创建零库存订单（选择供应商和商品，输入订单数量）；</li>
                                <li class="list-group-item">进入「零库存订单」→ 更新订单状态（根据实际进度切换为「已发货」「已完成」）。</li>
                            </ol>
                        </div>
                    </div>

                    <div class="card mb-4">
                        <div class="card-header bg-primary text-white">
                            <h3>流程2：虚拟库存→转移为自有库存→出库</h3>
                        </div>
                        <div class="card-body">
                            <ol class="list-group list-group-numbered">
                                <li class="list-group-item">进入「转移记录」→ 发起转移（选择供应商、商品，输入数量和目标仓库）；</li>
                                <li class="list-group-item">进入「自有库存」→ 确认库存已增加；</li>
                                <li class="list-group-item">进入「自有库存」→ 发起出库（选择商品、仓库和出库数量）；</li>
                                <li class="list-group-item">进入「出入库单据」→ 查看出库单据详情。</li>
                            </ol>
                        </div>
                    </div>
                </section>

                <!-- 常见问题与解决方案 -->
                <section id="faq">
                    <h1 class="section-title">五、常见问题与解决方案</h1>
                    
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading1">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                                    1. 登录失败（提示「账号密码错误」）
                                </button>
                            </h2>
                            <div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    解决方案：检查用户名是否为「admin」，密码是否为「123456」（默认账号不可修改）。
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading2">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
                                    2. 页面无法打开（提示「TemplateNotFound: xxx.html」）
                                </button>
                            </h2>
                            <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    解决方案：<br>
                                    1. 确认 <code>templates</code> 目录下存在对应HTML文件（如 <code>sync_logs.html</code>）；<br>
                                    2. 检查文件名拼写是否正确（区分大小写，如 <code>Supplier.html</code> 与 <code>supplier.html</code> 不同）。
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading3">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
                                    3. 数据库表不存在（提示「sqlite3.OperationalError: no such table: xxx」）
                                </button>
                            </h2>
                            <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    解决方案：<br>
                                    1. 删除项目根目录下的 <code>database.db</code> 文件；<br>
                                    2. 重新运行 <code>python run.py</code>，系统会自动初始化数据库表。
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading4">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4">
                                    4. 库存不足无法操作（提示「库存不足」）
                                </button>
                            </h2>
                            <div id="collapse4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    解决方案：<br>
                                    - 出库：先执行入库操作增加自有库存；<br>
                                    - 零库存订单/转移：先同步虚拟库存（增加虚拟库存数量）。
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading5">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5">
                                    5. 参数错误（提示「缺少参数」「数量必须是数字」）
                                </button>
                            </h2>
                            <div id="collapse5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    解决方案：<br>
                                    1. 检查表单是否填写完整（带「*」为必填项）；<br>
                                    2. 数量字段需输入正整数（不可为负数、小数或文字）。
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading6">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6">
                                    6. 供应商名称重复（提示「供应商名称已存在」）
                                </button>
                            </h2>
                            <div id="collapse6" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    解决方案：修改供应商名称，确保名称唯一（系统不允许重复供应商名称）。
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 注意事项 -->
                <section id="notes">
                    <h1 class="section-title">六、注意事项</h1>
                    
                    <div class="alert alert-warning mb-4">
                        <ul class="mb-0">
                            <li>数据库文件：<code>database.db</code> 存储所有系统数据，删除后会丢失所有记录（测试环境可删除重建，生产环境需备份）；</li>
                            <li>操作权限：当前系统仅支持管理员账号（admin），无多角色权限控制；</li>
                            <li>数据一致性：删除供应商会级联删除关联的虚拟库存，操作前请确认数据无保留需求；</li>
                            <li>特殊字符：商品名称、仓库名称等字段支持中文，但避免输入 <code>&amp;</code> <code>#</code> 等特殊字符（可能导致URL解析错误）；</li>
                            <li>系统重启：修改后端代码后需重启 <code>run.py</code> 才能生效。</li>
                        </ul>
                    </div>
                </section>
            </main>
        </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="btn btn-primary back-to-top" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
        回到顶部
    </button>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 侧边栏导航激活状态
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function() {
                document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 回到顶部按钮显示/隐藏
        window.addEventListener('scroll', function() {
            const backToTopBtn = document.getElementById('backToTop');
            if (window.scrollY > 300) {
                backToTopBtn.style.display = 'block';
            } else {
                backToTopBtn.style.display = 'none';
            }
        });

        // 初始激活第一个导航项
        document.querySelector('.nav-link').classList.add('active');
    </script>
</body>
</html>